<!DOCTYPE html>
<html lang='zh'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>连接WIFI</title>
    <style>
        body {
            background: #f7f7f7;
            color: #111010;
        }
        #app {
            width: 260px;
            padding: 20px 10px;
            background: #d1d1d1;
            position: absolute;
            transform: translate(-50%, -50%);
            left: 50%;
            top: 50%;
            border-radius: 10px;
        }
        .form {
            display: flex;
            flex-flow: column;
            gap: 10px;
        }
        .form .input-item, .form .operate-item {
            display: flex;
            gap: 10px;
            justify-content: center;
            align-items: center;
        }
        .form .input-item .title {
            width: 68px;
        }

        input[type='text'] {
            border: none;
            padding: 5px;
        }
        input:focus-visible {
            outline: none;
        }


    </style>
</head>
<body>
    <div id='app'>
        <form action='/submitWifi' method='post'>
            <div class='form'>
                <div class='input-item'>
                    <div class='title'>WIFI名称</div>
                    <div class='content'>
                        <input type='text' name='wifi_name' id='wifi_name'>
                    </div>
                </div>
                <div class='input-item'>
                    <div class='title'>WIFI密码</div>
                    <div class='content'>
                        <input type='text' name='wifi_pwd' id='wifi_pwd'>
                    </div>
                </div>
                <div class='operate-item'>
                    <div class='btn'>
                        <input type='submit' value='提交' onClick='submit()'>
                    </div>
                    <!-- <div class='btn'>
                        <input type='button' value='查看列表' onClick='jump2webList()'>
                    </div> -->
                </div>
            </div>
        </form>
        <div class='wifi-list'>
            <!-- <iframe width='100%' src='./wifi-list.html'>
            </iframe> -->
            <iframe width='100%' src='/webWifiList'>
            </iframe>
        </div>
    </div>
</body>
<script>
    const wifiNameEl = document.getElementById('wifi_name');
    const wifiPwdEl = document.getElementById('wifi_pwd');
    wifiNameEl.focus();

    function submit() {
        const wifiName = wifiNameEl.value;
        const wifiPwd = wifiPwdEl.value;

        if (!wifiName) {
            alert('请输入WIFI名称');
        }
        if (!wifiPwd) {
            alert('请输入WIFI密码');
        }
        
        const sendData = {
            wifi_name: wifiName,
            wifi_pwd: wifiPwd
        };

        fetch('/submitWifi', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(sendData),
        })
        .then((response) => response.json())
        .then((data) => {
            console.log(data, 'submit Wifi Res');
        }).catch(e => {
            console.log(e, 'submit Wifi Error');
        });
    }

    function jump2webList() {  
        window.location.href = '/webWifiList'
    }
</script>
</html>